

// 封装 ajax 接口
import {ajax} from "~/request"
export default class DataDemo extends Component{

  state = {
    list:[]
  }
  // 组件载入完毕请求数据 
  componentDidMount(){
      ajax.get("http://47.104.209.44:3333/banner",{
        id:2107,
        limit:10
      })
      .then(res=>{
        console.log(res)
        this.setState({
          list:res.data.banners
        })
      })
      .catch(err=>{
        console.log(err)
      })

      ajax.post("http://localhost:4400/api/limit-list",{
        limit:1
      })
      .then(res=>{
        console.log(res)
      })
  }

  render(){
    const {list} = this.state 
    return (
      <div>
        <h2> React 数据封装 请求 </h2>
        {
           list.length>0 ? <div className="list" style={{width:'100%',padding:20}}>
              {
                list.map((l,i)=>{
                  return (
                    <div key={i} className="item" style={{marginTop:15,border:'1px solid #eee',borderRadius:8,display:'flex',flexDirection:'row',alignItems:'center'}}>
                      <img src={l.imageUrl} style={{width:130,height:130,marginRight:10}} alt=""/>
                      <p>
                        {l.typeTitle} - {l.encodeId}
                      </p>
                    </div>
                  )
                })
              }
          </div>
          :
          <div>
            暂无数据
          </div>
        }
        
      </div>
    )
  }
}